import './App.css'
import RepetitionHoverEffect from '~/RepetitionHoverEffect'
import RepetitionHoverFilter from '~/RepetitionHoverFilter'
import ImageMotionTrail from '~/ImageMotionTrail.jsx'
import ImageMotionTrailPerspective from '~/ImageMotionTrailPerspective.tsx'
import CustomCursor from '~/CustomCursor'

function App() {

    return (
        <>
            <div style={{height: '100vh', display: 'flex', placeItems: 'flex-start'}}>
                <p>React Image Hover Effect</p>
                <RepetitionHoverEffect
                    imageUrl="../image_effect1/1.jpg"
                    repetitionCount={10}
                    repetitionScaleInterval={0.06}
                />
            </div>
            <div style={{height: '100vh', display: 'flex', placeItems: 'flex-start'}}>
                <p>React Image Hover Filter Effect</p>
                <RepetitionHoverFilter
                    imageUrl="../image_effect1/1.jpg"
                    repetitionCount={10}
                />
            </div>
            <div style={{height: '100vh', display: 'flex', placeItems: 'flex-start'}}>
                <ImageMotionTrail
                    imageUrl="../image_effect1/1.jpg"

                />
            </div>
            <div style={{height: '100vh', display: 'flex', placeItems: 'flex-start'}}>
                <ImageMotionTrailPerspective
                    imageUrl="../image_effect1/1.jpg"
                    options={{
                        perspective: 250,
                        totalTrailElements: 20,
                        valuesFromTo: {
                            x: [-250, 250],
                            y: [-90, 90],
                            rx: [-8, 8],
                            ry: [-15, 15],
                            rz: [-5, 5]
                        },
                        opacityChange: true
                    }}
                />
            </div>
            <div style={{height: '100vh', display: 'flex', placeItems: 'flex-start'}}>
                <CustomCursor/>
            </div>
        </>
    )
}

export default App
